//less 中的单行注释，注释中的内容不会解析到css中

/*

    CSS中的注释会解析到css文件中
*/
body{
    background-color: #ff0;
}
.box1{
    background-color: green;


    .box2{
        background-color: orange;
        .box4{
            background-color: palevioletred;
        }
    }
    .box3{
        background-color: orchid;
    }
}
//变量，在变量中可以存储一个任何的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法：@变量名
@a:100px;
@b:#bfa;
@c:rolateX(45deg);
@d:box6;
.box5{
    // 使用变量时，如果是直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
    transform: @c;
}

.@{d}{
    // 作为类(或者属性名，比如color)名时，或者一部分值使用时必须以@{变量名}的形式使用
    width: @a;
    // 注意双引号
    background-image: url("@{d}/1.png");
}
@e:600px;
@e:700px;

div{
    @e:115px;
    width: @e;
    height: @f;
}
@f:335px;
// 变量发生重名时，会优先使用比较近的
// 可以在变量声明前使用变量

div{
    width: 300px;
    height: $width;
}